<template>
  <div class="pages storesalesDetail">
    <div class="tableSearch">
      <el-button type="primary" size="mini" @click="goBack()">返回</el-button>
    </div>
    <div class="content">
      <div class="center">
        <ul class="content-ul">
          <li>
            单&nbsp; &nbsp;号:
            <span>{{record.orderCode}}</span>
          </li>
          <li>
            日&nbsp; &nbsp;期:
            <span>{{record.createTime}}</span>
          </li>
          <li>
            收银员:
            <span>{{record.cashier}}</span>
          </li>
        </ul>
        <ul class="content-ul">
          <li>
            会员手机:
            <span>{{record.phone}}</span>
          </li>
          <li v-if="amountShow==true">
            原销售单号:
            <span>{{record.saleOrderCode}}</span>
          </li>
          <li>
            收银机号:
            <span>{{record.posCode}}</span>
          </li>
        </ul>
      </div>
      <div class="from_main infon">
        <div class="infon_text">
          <span class="infon_shu"></span>
          <span class="infon_text_t">商品信息</span>
        </div>
        <div v-if="servicetime" class="service">
          服务时间： {{record.appointmentTime}}
          <span></span>
        </div>
        <el-table v-if="wares" :data="tableDataGoods" border style="width: 100%">
          <el-table-column prop="barCode" label="商品条码号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="parameter" label="规格型号" align="center">
            <template slot-scope="scope">
              <div v-for="(item, index) in  scope.row.parameter" :key="index">
                <span>{{item.paramName}} :</span>
                <span>{{item.paramValue}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="primaryClassifyName" label="所属分类" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column prop="goodsCount" label="数量" align="center"></el-table-column>
          <el-table-column prop="presentNum" label="商品赠送量" align="center"></el-table-column>
          <el-table-column prop="goodsUnit" label="单位" align="center"></el-table-column>
          <el-table-column prop="originAmount" label="金额" align="center"></el-table-column>
          <el-table-column prop="consignNum" label="寄存数量" align="center"></el-table-column>
          <el-table-column prop="isReturn" label="是否退货" align="center"></el-table-column>
        </el-table>
        <el-table v-if="service" :data="tableDataServe" border style="width: 100%">
          <el-table-column prop="serviceName" label="服务名称" align="center"></el-table-column>
          <el-table-column prop="serviceLength" label="服务时长" align="center"></el-table-column>
          <el-table-column prop="technicianName" label="技师" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column prop="goodsCount" label="数量" align="center"></el-table-column>
          <el-table-column prop="originAmount" label="金额" align="center"></el-table-column>
        </el-table>
        <el-table v-if="card" :data="tableDataCard" border style="width: 100%">
          <el-table-column prop="code" label="编号" align="center"></el-table-column>
          <el-table-column prop="name" label="次卡名称" align="center"></el-table-column>
          <el-table-column prop="serviceName" label="适用服务" align="center"></el-table-column>
          <el-table-column prop="times" label="次数" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column prop="goodsCount" label="数量" align="center"></el-table-column>
          <el-table-column prop="originAmount" label="金额" align="center"></el-table-column>
        </el-table>
        <div class="content-sum">
          <div>
            合计金额：
            <span>￥{{record.originPrice}}</span>
          </div>
        </div>
        <div class="infon_text">
          <span class="infon_shu"></span>
          <span class="infon_text_t">{{settlementInformation}}</span>
        </div>
        <ul class="infon_text-ul">
          <li class="li-font li-red" v-for="(billsms, index) in billsmsg" :key="index">
            {{billsms.name}}:
            <span>￥{{billsms.value}}</span>
          </li>
        </ul>
        <div v-if="amountShow==true" style="margin-bottom:50px;margin-right:250px">
          <div class="content-sum">
            <div>
              应退金额：
              <span>￥{{record.originPrice}}</span>
            </div>
          </div>
          <div class="content-sum">
            <div>
              实退金额：
              <span>￥{{record.goodsAmount}}</span>
            </div>
          </div>
        </div>
        <div class="content-sum" v-else style="margin-bottom:50px;margin-right:250px">
          <div>
            实收金额：
            <span>￥{{record.goodsAmount}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import util from "@/util";
import { shopSaleReportDetail } from "@/api";
export default {
  computed: mapState(["merchantId"]),
  data() {
    return {
      record: {}, //数据
      wares: false, //----------商品列表
      tableDataGoods: [], //商品列表
      service: false, //--------服务列表
      tableDataServe: [], //服务列表
      card: false, //-----------计次卡l列表
      tableDataCard: [], //几次列表
      member: false, //---------会员顾问
      servicetime: false, //---------服务时间
      billsmsg: [], //---------支付方式
      settlementInformation: "结算信息",
      amountShow: false
    };
  },
  created() {
    let type = util.getQuery("type");
    if (type == "0") {
      this.wares = true;
      this.member = true;
      this.servicetime = false;
    } else if (type == "2") {
      this.service = true;
      this.servicetime = true;
    } else if (type == "1") {
      this.card = true;
      this.servicetime = false;
    }
    this.salesDetail();
  },
  mounted() {},
  methods: {
    // 查看详情
    salesDetail() {
      let type = util.getQuery("type");
      shopSaleReportDetail({
        id: util.getQuery("id"),
        goodsType: type,
        orderType: util.getQuery("orderType")
      }).then(res => {
        this.record = res.data;
        this.billsmsg = this.record.priceList;
        if (res.data.isReturn == 1) {
          this.settlementInformation = "退款信息";
          this.amountShow = true;
        }
        if (type == "0") {
          if (this.record.list.length > 0) {
            this.tableDataGoods = this.record.list;
          } //商品数据详情
        } else if (type == "1") {
          if (this.record.list.length > 0) {
            this.tableDataCard = this.record.list;
          } //次卡数据详情
        } else if (type == "2") {
          if (this.record.list.length > 0) {
            this.tableDataServe = res.data.list;
          } //服务数据详情
        }
      });
    },
    // 返回按钮
    goBack() {
      history.back();
    }
  }
};
</script>
<style>
.center {
  width: 1100px;
  height: 130px;
  margin-top: 30px;
}
.content-ul {
  float: left;
  width: 500px;
  height: 100px;
}
.content-ul li {
  font-size: 14px;
  width: 100%;
  height: 40px;
}
.content-ul li span {
  margin-left: 24px;
}
.content-sum {
  margin-top: 10px;
  margin-right: 20px;
  height: 30px;
  position: relative;
}
.content-sum div {
  width: 200px;
  color: #444;
  position: absolute;
  top: 10px;
  right: 30px;
}
.content-sum div span {
  color: #f82828;
}
.service {
  line-height: 70px;
  font-size: 14px;
  margin-left: 30px;
  color: #666;
}
.infon_text-ul {
  margin-left: 85px;
  width: 1000px;
  /* height: 50px; */
  margin-bottom: 40px;
}
.infon_text-ul li {
  width: 100%;
  line-height: 44px;
  font-size: 16px;
  color: #6b6b6b;
  text-indent: 20px;
  position: relative;
  font-weight: bolder;
}
.infon_text-ul .lines {
  border-bottom: 1px dashed #ccc;
}
.infon_text-ul li span {
  position: absolute;
  right: 25px;
}
.infon_text-ul .li-font {
  font-weight: normal;
}
.infon_text-ul .li-red span {
  color: red;
}
</style>

